<template>
  <div class="flex h-full">
    <div class="org-tree">
      <OrgTree @selectOrg="selectOrg"></OrgTree>
    </div>
    <div class="w-full">
      <div class="flex justify-between ml-20px mb-10px">
        <SearchForm @query="queryUserList" class="left"></SearchForm>
        <Button v-per="'add'" type="primary" class="right" @click="handleCreate">增加</Button>
      </div>
      <Table
        :bordered="true"
        :dataSource="userList"
        :pagination="false"
        :columns="columns"
        class="main-table ml-20px"
        :loading="loading"
        :scroll="scroll"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <span v-if="record.status == 1"> 启用 </span>
            <span v-else> 停用 </span>
          </template>
        </template>
        <template #action="{ record }">
          <span v-per="'detail'">
            <a @click="onDetail(record)"><ExclamationCircleOutlined /></a>
          </span>
          <Divider type="vertical" />
          <span v-per="'update'">
            <a @click="onEdit(record)"><EditOutlined /></a>
          </span>
          <Divider type="vertical" />
          <span v-per="'updatePass'">
            <a @click="onEditPassWord(record)"><KeyOutlined /></a>
          </span>
          <Divider type="vertical" />
          <span v-per="'delete'">
            <Popconfirm title="是否确认删除?" okText="确认" cancelText="取消" @confirm="onDelete(record.id)">
              <a><DeleteOutlined /></a>
            </Popconfirm>
          </span>
        </template>
      </Table>
      <br />
      <Pagination
        v-model:current="page.current"
        :page-size-options="page.pageSizeOptions"
        :total="page.total"
        :show-total="(total) => `共 ${page.total} 条`"
        show-size-changer
        :page-size="page.pageSize"
        @showSizeChange="onShowSizeChange"
        @change="changeCurrent"
      >
      </Pagination>
      <Form :visible="modelVisible" :type="modelType" :user="selectUser" @close="handleSuccess"></Form>
      <Password :visible="passwordModelVisible" :user="selectUser" @close="handleChangePasswordSuccess"></Password>
      <Detail :visible="modelDetailVisible" :user="selectUser" @close="handleDetailClose"></Detail>
    </div>
  </div>
</template>
<script setup lang="ts">
import { Table, Popconfirm, message, Button, Divider, Pagination } from 'ant-design-vue';
import SearchForm from './searchForm.vue';
import { ref, unref, nextTick } from 'vue';
import OrgTree from './component/orgtree.vue';
import { getSaaSUserList, deleteSaaSUser } from '/@/api/organization-mgmt/user';
import { columns, Page } from './data';
import Form from './component/form.vue';
import Detail from './component/detail.vue';

import Password from './component/changePassword.vue';
import { ExclamationCircleOutlined, EditOutlined, DeleteOutlined, KeyOutlined } from '@ant-design/icons-vue';

const scroll = ref<undefined | object>(undefined);
const loading = ref(true);
const currentNode = ref<Recordable>({});
const page = ref<Page>({
  current: 1,
  pageSizeOptions: ['10', '20', '30', '40', '50'],
  total: 0,
  pageSize: 10,
});
const userList = ref([]);

async function reload(_params: any) {
  let params = {
    ..._params,
    current: page.value.current,
    size: page.value.pageSize,
  };

  try {
    let res = await getSaaSUserList(params);
    if (res) {
      page.value.total = res.total;
      userList.value = res.items;
    }
  } finally {
    loading.value = false;
  }
}
function reloadTable() {
  let model = {};
  if (unref(currentNode)) {
    model = { orgId: unref(currentNode).id };
  }
  reload({ model });
}
const onShowSizeChange = (current: number, pageSize: number) => {
  page.value.current = current;
  page.value.pageSize = pageSize;
  if (pageSize > 10) {
    scroll.value = { y: 500 };
  }
  reloadTable();
};
const changeCurrent = (current: number) => {
  page.value.current = current;
  reloadTable();
};

async function queryUserList(val: any) {
  let orgId = '';
  if (unref(currentNode)) {
    orgId = unref(currentNode).id;
  }
  let model = {
    ...val,
    orgId: orgId,
  };
  reload({ model });
}

// 选择组织查询用户
async function selectOrg(node: any) {
  currentNode.value = node;
  reloadTable();
}
const modelType = ref();
const selectUser = ref({});
let modelVisible = ref(false);
function openModel() {
  modelVisible.value = true;
}
const handleCreate = () => {
  modelType.value = 1;
  openModel();
};
const onEdit = (user: any) => {
  selectUser.value = user;
  modelType.value = 2;
  nextTick(() => {
    openModel();
  });
};
let passwordModelVisible = ref(false);
function openChangePasswordModel() {
  passwordModelVisible.value = true;
}
const onEditPassWord = (user: any) => {
  selectUser.value = user;
  openChangePasswordModel();
};
let modelDetailVisible = ref(false);
const onDetail = (user: any) => {
  selectUser.value = user;
  modelDetailVisible.value = true;
};
async function handleDelete(key: string) {
  const res = await deleteSaaSUser(key);
  if (res) {
    message.success('删除用户成功！');
  } else {
    message.error('删除用户失败！');
  }
  reloadTable();
}
const onDelete = (key: string) => {
  handleDelete(key);
};

function closeModel() {
  modelVisible.value = false;
}
const handleSuccess = (val: string) => {
  closeModel();
  if (val && val === 'success') {
    reloadTable();
  }
};
const handleChangePasswordSuccess = (val: string) => {
  passwordModelVisible.value = false;
  if (val && val === 'success') {
    reloadTable();
  }
};
const handleDetailClose = () => {
  modelDetailVisible.value = false;
};
</script>
<style lang="less">
.ant-pagination {
  float: right;
}

.org-tree {
  border-right: 1px solid @table-border;
  border-bottom: 1px solid @table-border;
  height: 100%;
}
.card {
  padding: 10px;
  background-color: white;
  margin: 10px;
  border-radius: 10px;
}
.org {
  float: left;
  width: 20%;
  height: 100%;
  .input_search {
    width: 80%;
  }
}
.user {
  float: left;
  width: 78%;
  .title {
    .left {
      width: 600px;
      float: left;
    }
    .right {
      width: 70px;
      float: right;
    }
  }
  .table {
    width: 100%;
    min-height: 500px;
  }
}
</style>
